<template>
  <button class="location" @click="goToDetail">
    <i class="iconfont icon-xiazai19"></i> {{ city }}
  </button>
  <div id="map"></div>
</template>
<script setup>
import { gaode_vector } from '../../gaode_libs/gaode'

import { onMounted, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useCityStore } from '../../stores/city'
const $router = useRouter()
const { city } = toRefs(useCityStore())
const { getPositionHttp ,getCityList} = useCityStore()
onMounted(() => {
  const map = new ol.Map({
    target: 'map',
    layers: [gaode_vector],
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 4,
      projection: 'EPSG:4326',
    }),
  })
  getPositionHttp()
  getCityList()
})
function goToDetail() {
  $router.push('/city')
}
</script>

<style scoped>
@import url('https://at.alicdn.com/t/c/font_4027375_szqucoutw69.css');
#map {
  width: 100vw;
  height: 100vh;
}
.location {
  position: fixed;
  top: 0;
  left: 50px;
  background-color: #6528df;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  padding: 10px 20px;
  z-index: 1000;
}
</style>
